<template>
  <div class="outer-input" :style="{width:`${width}%`}">
    <div class="input-title">
        <span class="need" v-if="struc?.must">*</span>
        <span class="label-name">{{ struc?.viewName }}</span>
    </div>
    <div class="input-contextPackage">
      <div class="input-wrapper">
        <el-input
          class="input-1"
          v-model="valueInput.value"
          :placeholder="struc?.hint"
          @blur="out"
          @input="inputValue"
          :maxlength="struc?.length"
          :disabled="Boolean(!valueInput.canUpdate)"
        ></el-input>
        <div class="refresh-icon" @click="handleRefresh">
          <el-icon><refresh-right /></el-icon>
        </div>
        <div class="eidt-icon" @click="handleEdit">
          <el-icon><edit /></el-icon>
        </div>
      </div>
      <span class="errorhint" v-if="showError">{{
        struc?.errorHit
      }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { RefreshRight, Edit } from '@element-plus/icons-vue'
import { defineComponent, onMounted, PropType, ref, reactive, computed } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";
import useRequest from '../../hook/request';

export default defineComponent({
  components: {
    RefreshRight,
    Edit
  },
  type: 106,
  name: "RefreshNum",
  props: {
    struc: {
      type: Object as PropType<DataStruc>,
    },
    passWidth: {
			type: Number
		}
  },
  setup: (props, context) => {
    let showError = ref(false);
    let valueInput: DataStruc = reactive(props.struc as DataStruc);
    const dataCheck = useDataCheck();
    let check = () => {
      if(props.struc?.must) {
        if (props.struc?.value) {
          showError.value = false;
        } else {
          console.debug("检查出错：", showError);
          props.struc.errorHit = `请输入${props.struc.viewName}`
          showError.value = true;
        }
      }
      
      return !showError.value;
    };

    const handleRefresh = async() => {
      let result:any = await useRequest(`customer/info/refreshHistoryNum`, {}, 'GET')
      valueInput.value = result.data
    }
    const handleEdit = () => {
      Boolean(valueInput.canUpdate) ? valueInput.canUpdate = 0 : valueInput.canUpdate = 1
    }

    const inputValue = (e: string) => {
      valueInput.value = e
    };
    const width = computed(() => props.passWidth)

    onMounted(() => {
      dataCheck.addDataCheck(check);
    });

    const out = () => {
      if(!valueInput.must) {
					showError.value = false;
				} else {
					check()
				}
    }

    return { 
      showError, 
      check, 
      inputValue, 
      valueInput, 
      width,
      handleRefresh,
      handleEdit,
      out
      };
  },
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  // width: 45%;
  padding-right: 10px;
  box-sizing: border-box;
  .input-title {
    padding-bottom: 10px;
    color: $regularText;
    .need {
      color: red;
    }
    .label-name {
      font-size: $fontSize-1
    }
  
  }

  .input-contextPackage {
      display: flex;

      .input-wrapper {
        display: flex;

        .input-1 {
          flex: 1;
        }
      }
      
      .refresh-icon, .eidt-icon {
        display: flex;
        width: 30px;
        height: 30px;
        margin-left: 8px;
        border-radius: 4px;
        box-shadow: 0 2px 8px #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .refresh-icon:active {
        & > i {
          transform: scale(.8)
        }
      }

    
    .errorhint {
      @extend .error;
      height: 10px;
      display: block;
      line-height: 1;
    }
  }
}
</style>
